<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title>使用xml回传实现省市区联动</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<script type="text/javascript">
		function postProvSend() {
			var xmlHttp = new XMLHttpRequest();
				xmlHttp.open("post", "prov_xml");
				xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
				xmlHttp.onreadystatechange = function() {
					backProv(xmlHttp);
			}
			xmlHttp.send();
		}
				
		function backProv(xmlHttp) {
			if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
				var provinces = xmlHttp.responseXML.getElementsByTagName("province");
				for(var i = 0; i < provinces.length; i++) {
					var option = document.createElement("option");
					var option_text = document.createTextNode(provinces[i].lastChild.firstChild.nodeValue);
					option.appendChild(option_text);
					option.setAttribute("value", provinces[i].firstChild.firstChild.nodeValue)
					document.getElementById("prov").appendChild(option);
				}
			}
		}
		
		function postCitySend(provid) {
			var xmlHttp = new XMLHttpRequest();
				xmlHttp.open("post", "city_xml");
				xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
				xmlHttp.onreadystatechange = function() {
					backCity(xmlHttp);
			}
			xmlHttp.send("provid=" + provid);
		}
		
		function backCity(xmlHttp) {
			if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
				var citys = xmlHttp.responseXML.getElementsByTagName("city");
				while(document.getElementById("city").firstChild != null) {
					document.getElementById("city").removeChild(document.getElementById("city").firstChild);
				}
				for(var i = 0; i < citys.length; i++) {
					var option = document.createElement("option");
					var option_text = document.createTextNode(citys[i].lastChild.firstChild.nodeValue);
					option.appendChild(option_text);
					option.setAttribute("value", citys[i].firstChild.firstChild.nodeValue)
					document.getElementById("city").appendChild(option);
				}
			}
		}
		
		function postAreaSend(cityid) {
			var xmlHttp = new XMLHttpRequest();
				xmlHttp.open("post", "area_xml");
				xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
				xmlHttp.onreadystatechange = function() {
					backArea(xmlHttp);
			}
			xmlHttp.send("cityid=" + cityid);
		}
		
		function backArea(xmlHttp) {
			if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
				var areas = xmlHttp.responseXML.getElementsByTagName("area");
				while(document.getElementById("area").firstChild != null) {
					document.getElementById("area").removeChild(document.getElementById("area").firstChild);
				}
				for(var i = 0; i < areas.length; i++) {
					var option = document.createElement("option");
					var option_text = document.createTextNode(areas[i].lastChild.firstChild.nodeValue);
					option.appendChild(option_text);
					option.setAttribute("value", areas[i].firstChild.firstChild.nodeValue)
					document.getElementById("area").appendChild(option);
				}
			}
		}
	</script>
  </head>
  
   
  <body onload="postProvSend()"	>
  	<span>省</span><select id="prov" onchange="postCitySend(this.value)"><option value="-1">请选择</option></select>&nbsp;&nbsp;&nbsp;
  	<span>市</span><select id="city" onchange="postAreaSend(this.value)"><option value="-1">请选择</option></select>&nbsp;&nbsp;&nbsp;
  	<span>区</span><select id="area"><option value="-1">请选择</option></select>
  </body>
</html>
